<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <title>
        允许提货列表
    </title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

    </script>
    <!-- 引入 layui.css -->
    <!-- <link href="./css/layui.css" rel="stylesheet" /> -->
    <link href="./css/layui.css" rel="stylesheet" />

    <!-- 引入 layui.js -->
    <script src="./js/layui.js"></script>
    <script src="./js/utils.js"></script>
    <script src="./js/constant.js"></script>
    <script src="./js/data.js"></script>
    <script src="./js/userAuth.js"></script>
    <script src="./js/request.js"></script>
    <script type="text/javascript">
        
        // 关键词
        var searchText = "";
        // 当前选中tab
        var activeKey = "";
        // 数据列表
        var data = [];
        
        // 当前页码
        var currentPage = 1;
        var offsetY = 0;


        function loadData(page) {
            const loadingIndex = layer.load();
            $.ajax({
                url: REQUEST_URL,
                data: JSON.stringify({
                    searchval: searchText,
                    index: page,
                    size: 20,
                    action: "GetOrderList",
                    type: activeKey
                }),
                headers: REQUEST_HEADERS(),
                processData: false,
                contentType: "application/json",
                type: "post",
                dataType: "json",
                success: function (res, s, xhr) {
                    layer.close(loadingIndex)
                    const responseData = responseHandler(res, s, xhr)
                    console.log('list',responseData)
                    if (responseData.code == 200) {
                        /**
                         * // 搜索框
            // 选项卡
            // 数据响应值
            // 页数
                         */
                        
                        var totalCount = responseData.list[0].Rows[0].Column1;
                        if (page == 1) {
                            data = responseData.list[1].Rows;
                            $(".data-list-container").children().remove();
                        } else {
                            data = [...data, ...responseData.list[1].Rows];
                        }
                        saveAllowGetProduct(page,data,activeKey,searchText,offsetY)
                        responseData.list[1].Rows.forEach(element => {
                                addElement(element);
                        });
                        currentPage = page;
                        $("#footer").remove();
                        if (data.length >= totalCount) {
                            
                            console.log(`设置底部不再加载更多`);
                            $(".data-list-container").append(`<div id="footer" >已显示全部</div>`)
                        } else {
                            
                            $(".data-list-container").append(`<div id="footer">点击加载更多</div>`)
                            $("#footer").click(function(e){
                                loadData(currentPage+1)
                            })
                        }
                        if(data.length == 0){
                            $(".data-list-container").append(`<div id="empty" style="width:100vw;text-align:center;height:200px;line-height:200px">暂无数据</div>`)
                        }else{
                            $("#empty").remove();
                        }

                    } else {
                        layer.open({
                            title: "提示",
                            content: "获取数据失败:" + responseData.code + ";" + responseData.message,
                        })
                    }

                },
                error: function (err) {
                    layer.close(loadingIndex)
                    layer.open({
                        title : "异常提示",
                        content : err
                    })
                }
            })
        }

        function addElement(data){
            
            const ele = `<div id="djh_${data.DJH}" class="data-list-item">
                <div class="li-item" style="font-size: 14px;color:gray">
                    单号：${data.DJH}
                </div>
                <div class="li-item">
                    <span class="li-item-label">销售单位：</span>${data.XSDW}
                </div>
                <div class="li-item">
                    <span class="li-item-label">客户名称：</span>${data.KSMC}
                </div>
                <div class="li-item">
                    <span class="li-item-label">提货人员：</span>${data.THR}
                </div>
                <div style="display: flex;flex-direction:row;justify-content:space-between" class="li-item">
                    <div>
                        <span class="li-item-label">车牌号码：</span>${data.CPH}
                    </div>
                    <div style="color:rgb(229,86,77)" class="li-item-label">
                        共：${data.HJSL}
                    </div>
                </div>
                <div class="footer">
                    <div>
                        日期：${data.THRQ}
                    </div>
                    <div id='item_footer_${data.DJH}' style="background-color: rgb(229,86,77);width:120px;height:40px;color:white;border-radius: 20px;line-height: 40px;text-align: center;display:${data.ZT=='DQR'?"":"none"}">
                        允许提货
                    </div>
                </div>
            </div>`
            $(".data-list-container").append(ele)
            $(`#item_footer_${data.DJH}`).css({"display":data.ZT=="DQR"?"":"none"})
            $("#djh_"+data.DJH).click(function(e){
                location.href=`${ALLOW_GET_PRODUCT_DETAIL_PAGE}?orderNo=${data.DJH}&orderName=${data.DJMC}&type=${data.ZT}`
            })
            $("#item_footer_"+data.DJH).click(function(e){
                console.log(e)
                e.preventDefault()
                e.stopPropagation()
                getInfoBeforeSubmit(data)
                // layer.confirm("确认收货？",{
                //     icon : 3,
                //     title : "收货确认"
                // },
                // function(index){
                    
                //     confirm(data,index)
                    
                // })
            })
            
            
        }

        function getInfoBeforeSubmit(clickData){
            const loadinIndex = layer.load();
            $.ajax({
                url : REQUEST_URL,
                method : "post",
                data:JSON.stringify({action : "OrderConfirmMsg","OrderName":clickData.DJMC,"OrderNo" : clickData.DJH,"CarNum":clickData.CPH,"UserName" : clickData.THR}),
                type : "json",
                contentType:"application/json",
                headers:REQUEST_HEADERS(),
                success:function(r,t,x){
                    layer.close(loadinIndex)
                    const res = responseHandler(r,t,x);
                    if(res.code == 200){
                        layer.confirm(res.message,{
                            title : "提示",
                            icon : 3,
                        },function(index){
                            confirm(clickData, index)
                            
                        })
                    }
                },
                error:function(){
                    layer.close(loadinIndex);
                }
            })
        }

        function confirm(data,confirmIndex){
            const loadingIndex = layer.load();
            $.ajax({
                url : REQUEST_URL,
                method : "post",
                data : JSON.stringify({action : "OrderConfirm",OrderName:data.DJMC,OrderNo:data.DJH,UserName:data.THR,CarNum:data.CPH}),
                type : "post",
                headers : REQUEST_HEADERS(),
                contentType:"application/json",
                success:function(res,t,x){
                    layer.close(loadingIndex)
                    if(res.code == 200){
                        layer.close(confirmIndex);    
                        reloadData()
                    }
                    // const res = responseHandler(r,t,x);
                    layer.msg(res.message)
                    
                },
                error:function(){
                    layer.close(loadingIndex);
                }
            })
        }

        /**加载头部数据*/
        function loadHeaderData() {
            $.ajax({
                url: REQUEST_URL,
                method: "post",
                type: "json",
                data: JSON.stringify({ action: "GetOrderMain", searchval: searchText }),
                contentType: "application/json",
                headers: REQUEST_HEADERS(),
                success: function (r, t, x) {
                    const res = responseHandler(r, t, x);
                    console.log(res)
                    if (res.code == 200) {
                        const d = res.list[0].Rows;
                        for (let i = 0; i < d.length; i++) {
                            $("#" + d[i].tabid).text(d[i].tabname)
                        }
                    }
                }
            })
        }

        function reloadData() {
            loadHeaderData();
            loadData(1);
        }
        function changeTab(key,onlyChangeCSS){
            if(activeKey == key){
                 return ;
             }else{
                 console.log(activeKey,key)
                 $("#"+activeKey).removeClass("active-tab-item");
                $("#"+key).addClass("active-tab-item");
                 if(!onlyChangeCSS){
                    // 当前选中tab
                    activeKey = key;
                    // 数据列表
                    data = [];
                    // 当前页码
                    currentPage = 1;
                    loadData(currentPage);
                 }
                
               
             }
        }
        function clickDQR(){
             changeTab("DQR")
        }
        function clickYQR(){
            changeTab("YQR")
        }
        function clickQB(){
            changeTab("QB")
        }

        function initial(){
            const tmp = getConfirmReceiveList();
            render(tmp)

        }
        function render(pageData){
            // 搜索框
            // 选项卡
            // 数据响应值
            // 页数
            if(pageData){
                const {searchText,activeKey,data,currentPage:cp,scrollY:_sy} = pageData;
                $("#keyword").val(searchText);
                changeTab(activeKey);
                currentPage = cp;
                window.scrollY = _sy
            }
        }

        $(document).ready(() => {
            init();
            // // reloadData();
            const tmp = getAllowGetProductList();
            if(tmp){
                render(tmp);
                // loadHeaderData();
            }else{

                clickDQR()
                // loadHeaderData();
            }
            // clickDQR()
                loadHeaderData();

            $("#keyword").bind("input propertychange keyup",function(e){
                if(e.type == "input"){
                    searchText = $("#keyword").val();
                    currentPage = 1;
                    data= [];
                    reloadData()
                }
                
            })
            $(window).scroll(function(e){
                offsetY = window.scrollY;
            })
        })
        
    </script>
    <style>
        .tab-item {
            display: flex;
            flex: 1;
            justify-content: center;
            align-items: center;
        }

        .active-tab-item {
            border-bottom: 3px solid rgb(229,86,77);
            padding: 10px 0px;
        }

        .data-list-container {
            background-color: rgb(244, 244, 244);
            display: flex;
            flex-direction: column;
            flex: 1;
        }

        .data-list-item {
            background-color: white;
            margin: 10px 10px 0px 10px;
            padding: 10px 10px 0px 10px;

        }

        body {
            height: 100%;
            background-color: rgb(244, 244, 244);
        }
        #footer {
            height: 50px;
            line-height: 50px;
            text-align: center;
        }

        .li-item {
            height: 34px;
            font-size: 16px;
        }

        .li-item-label {

            font-weight: 500;
        }

        .footer {
            border-top: 1px solid rgb(230, 230, 230);
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0px;
        }
    </style>
</head>


<body>
    <!-- 搜索框 -->
    <div style="padding: 5px 10px;">
        <input id="keyword" type="text" name="title" requirgb(229,86,77) lay-verify="requirgb(229,86,77)" placeholder="请输入搜索条件" autocomplete="off"
            class="layui-input">
    </div>
    <!-- tab选项卡 -->
    <div style="display: flex; flex-direction:row;background-color: white;">
        <div class="tab-item" onclick="clickDQR()">
            <div  id="DQR">
                待确认
            </div>
        </div>
        <div class="tab-item" onclick="clickYQR()">
            <div id="YQR">
                已确认
            </div>
        </div>
        <div class="tab-item" onclick="clickQB()">
            <div id="QB">
                全部
            </div>
        </div>
    </div>
    <!-- 数据列表 -->
    <div class="data-list-container">
        
    </div>

</body>

</html>